<template>
  <div class="app-container">
    <div v-if="isShow" style="padding-bottom: 30px">
      <div class="app-top">
        <div style="display: flex">
          <el-select
            @change="fetchData"
            clearable
            v-model="phtId"
            style="width: 100%"
          >
            <el-option
              v-for="item in infoType"
              :value="item.pid"
              :key="item.pid"
              :label="item.pname"
            ></el-option>
          </el-select>
        </div>
        <div>
          <el-button size="small" type="primary" @click="increment"
            >添加</el-button
          >
        </div>
      </div>
      <el-table
        v-loading="isLoading"
        :data="list"
        element-loading-text="Loading"
        :header-cell-style="{
          background: 'rgba(61,157,255,0.05)',
          color: '#333333',
        }"
        @row-click="setCurrentRow"
        :row-class-name="xxxTableRowClassName"
      >
        <!--      row-click 行点击事件-->
        <el-table-column
          align="center"
          type="index"
          label="ID"
        ></el-table-column>
        <el-table-column align="center" :prop="phtId" label="分类">
          <template slot-scope="scope">
            {{
              scope.row.phtId === 4
                ? "体育要闻"
                : scope.row.phtId === 5
                ? "运动知识"
                : "健康知识"
            }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="phTitle"
          label="标题"
        ></el-table-column>

        <el-table-column align="center" label="置顶" width="110">
          <template slot-scope="{ row }">
            <el-switch
              @change="changeTop(row)"
              v-model="row.phTop"
              active-color="#13ce66"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="status-col"
          label="列表隐藏"
          width="110"
        >
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.phConceal"
              @change="changeConceal(row)"
              active-color="#13ce66"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="封面图" width="130">
          <template slot-scope="{ row }">
            <img
              style="
                width: auto;
                height: auto;
                max-height: 100%;
                max-width: 100%;
              "
              v-if="row.phPic"
              :src="$store.state.user.BASE_URL + row.phPic"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="phSort" label="排序" width="110">
        </el-table-column>
        <el-table-column align="center" prop="phHits" label="点击次数">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="phCreateTime"
          label="添加时间"
        >
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="操作"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="small"
              @click="Edit($event, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              plain
              size="small"
              @click="del($event, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination-page @size="changeSize" @page="changePage" :total="total" />
    </div>
  </div>
</template>

<script>
import {
  sportInfoList,
  delSporItnfo,
  infoType,
  infoTopSwitch,
  infoConcealSwitch,
} from "@/api/information";
import infoForm from "./components/infoForm";

export default {
  data() {
    return {
      isShow: true,
      list: null,
      isLoading: false,
      value: false,
      dialogVisible: false,
      item: {},
      model: {
        pageSize: 10,
        pageNum: 1,
      },

      total: -1,
      studentMessage: {},
      infoType: [],
      classSource: [],
      phtId: "",
    };
  },
  created() {
    this.getInfoType();
    this.fetchData();
  },
  methods: {
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    async fetchData() {
      this.isLoading = true;
      let data = {
        userId: this.$store.state.user.USER_INFO.id,
        phtId: this.phtId,
        pageSize: this.model.pageSize,
        pageNum: this.model.pageNum,
      };
      const result = await sportInfoList(data);
      if (result.code === 200) {
        this.list = result.result.informationList.list;
        this.total = result.result.informationList.total;
        //  this.form.phtId = result.result.informationList[0].phtId;
        this.isLoading = false;
      }
    },
    //隐藏开关
    changeConceal(row) {
      this.isLoading = true;
      let data = {
        phId: row.phId,
        phConceal: row.phConceal,
      };
      infoConcealSwitch({
        ...data,
      }).then((response) => {
        if (response.code === 200) {
          this.isLoading = false;
          this.fetchData();
        }
      });
    },
    //置顶开关
    changeTop(row) {
      this.isLoading = true;
      let data = {
        phId: row.phId,
        phTop: row.phTop,
      };
      infoTopSwitch({
        ...data,
      }).then((response) => {
        if (response.code === 200) {
          this.isLoading = false;
          this.fetchData();
        }
      });
    },
    getInfoType() {
      let data = {
        userId: this.$store.state.user.USER_INFO.id,
      };
      infoType(data).then((res) => {
        if (res.code == 200) {
          this.infoType = res.result;
        }
      });
    },
    del(evt, row) {
      let target = evt.target;
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (target.nodeName == "SPAN") {
            target = evt.target.parentNode;
          }
          target.blur();
          let data = {
            phId: row.phId,
            userId: this.$store.state.user.USER_INFO.id,
          };
          delSporItnfo(data).then((res) => {
            if (res.code == 200) {
              this.fetchData(
                this.list.length === 1 && this.model.pageSize > 1
                  ? this.model.pageSize - 1
                  : this.model.pageSize
              );
              this.$message({
                type: "success",
                message: res.result.tips,
              });
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {
          if (target.nodeName == "SPAN") {
            target = evt.target.parentNode;
          }
          target.blur();
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    changeSize(size) {
      this.model.pageSize = size;
      this.fetchData();
    },

    changePage(page) {
      this.model.pageNum = page;
      this.fetchData();
    },
    Edit(evt, row) {
      let target = evt.target;
      if (target.nodeName == "SPAN") {
        target = evt.target.parentNode;
      }
      target.blur();
      this.item = { ...row };
      this.$router.push({
        path: "/sportsConsulting/infoForm",
        query: {
          item: JSON.stringify(this.item),
          isEdit: true,
        },
      });
    },
    setCurrentRow(row) {
      this.studentMessage = row;
    },

    increment() {
      this.$router.push({
        path: "/sportsConsulting/infoForm",
      });
      this.isEdit = false;
      this.item = {};
    },
    back() {
      this.isEdit = false;
      this.item = {};
      this.isShow = !this.isShow;
      this.fetchData();
    },
  },
  components: {
    infoForm,
  },
};
</script>
<style scoped lang="scss">
.app-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
::v-deep .el-table__row.statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
</style>
